vue生成二维码，并实现点击下载功能 |
您所在的位置：网站首页 › vue二维码生成 打印 › vue生成二维码，并实现点击下载功能 |
vue生成二维码，并实现点击下载功能
|
vue-element-admin 生成二维码，并实现点击下载功能
本人项目中，是需要实现在表格中显示支付链接，并将支付链接渲染成二维码，管理员点击二维码后，直接下载此二维码，用于分享给客户，实现h5支付功能。 安装 qrcode ,使用npmnpm install vue-qr --save 在使用页面引入import vueQr from 'vue-qr' 表格渲染由于我这里是在表格渲染的，会出现使用 :ref="Qrcode"时，点击事件 downloadImg 会重复下载的同一张二维码，所以我在这里给 Qrcode 拼接上了唯一的链接id,这样在下方下载时，也拼接上link_id，就可以区分了。 点击事件调起的 下载方法 methods: { downloadImg(link_id) { const iconUrl = this.$refs['Qrcode' + link_id].$el.src const a = document.createElement('a') const event = new MouseEvent('click') a.download = link_id a.href = iconUrl a.dispatchEvent(event) } } 列表效果展示
6.下载效果展示 |
如有微信可 VX联系 qubojie【本文地址】
今日新闻 |
推荐新闻 |